<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

    // 获取全局类型
    const PropTypes = require('prop-types');

    class Button extends React.Component {
        render() {
            return (
                    <button style={{background: this.context.color}}>
                        {this.props.children}
                    </button>
            );
        }
    }

    Button.contextTypes = {
        color: PropTypes.string //设定color 的类型
    };


    class Message extends React.Component {
        render() {
            return (
                    <div>
                        {this.props.text} <Button>Delete</Button>
                    </div>
            );
        }
    }

    class MessageList extends React.Component {
        getChildContext() {
            return {color: "purple"};
        }

        render() {
            const children = this.props.messages.map((message) =>
                    <Message text={message.text} />
            );
            return <div>{children}</div>;
        }
    }

    MessageList.childContextTypes = {
        color: PropTypes.string
    };


</script>
</body>
</html>

